<template>
  <div>
    <div class="mod-config" id="myDiagramDiv" style="margin-top: 20px;height:750px">

    </div>

    <el-dialog
      :title="titleswitch"
      :visible.sync="openswitch"
      width="30%">

    </el-dialog>
  </div>

</template>

<script>
    import "@/assets/go.js"
    import {init} from "@/assets/js/changeTopology.js"

    export default {
        // name:''
        data() {
            return {
                dataForm: {
                    key: ''
                },
                openswitch: false,
                titleswitch: 'title',
                virtualDevice: [],
                source: null,
                domains: [],
                vmArr: [],
                myDiagram: null,
            }
        },
        watch: {
            myDiagram(val) {
                this.myDiagram.addDiagramListener("SelectionDeleting", (e) => {
                    e.subject.each(n => {// n为删除节点或线的对象
                        let O = n.data
                        if (O.type == "service") {
                            let nodeData = this.myDiagram.model.findNodeDataForKey(O.group)
                            nodeData.vms.forEach((m, i) => {
                                if (m.cmpId == O.key) nodeData.vms.splice(i, 1)
                            })
                            delete O.key
                            delete O.type
                            delete O.group
                            this.virtualDevice.push(O)
                            this.myDiagram.model.updateTargetBindings(nodeData)
                        } else if (O.isGroup) {
                            this.virtualDevice.push.apply(this.virtualDevice, O.vms);
                        }
                    })
                })
            }
        },
        mounted() {

            // this.$http({
            //     url: this.$http.adornEndogenousUrl('/generator/switchtopology/list'),
            //     method: 'get',
            //     params: this.$http.adornParams({
            //         'page': this.pageIndex,
            //         'limit': this.pageSize,
            //         'key': this.dataForm.key
            //     })
            // }).then(({data}) => {
            //     console.log(data);
            // })


            this.initTopo()

        },
        methods: {
            initTopo() {

                // 'page': this.pageIndex,
                //     'limit': this.pageSize,

                this.$http({
                    url: this.$http.adornEndogenousUrl('/generator/switchtopology/list'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'key': this.dataForm.key
                    })
                }).then(({data}) => {

                   let nodeArr=data.nodeArr
                   let linkArr=data.linkArr


                   // let nodeArr=[
                   //      {
                   //          "id":"00:00:00:00:00:00:00:01",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:02",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:03",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:04",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:05",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:06",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:07",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:08",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:09",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      },
                   //      {
                   //          "id":"00:00:00:00:00:00:00:0a",
                   //          "isBidirectional":"true",
                   //          "type":"switch"
                   //      }
                   //  ]

                   // let linkArr=[
                   //                  {
                   //                      "src-port":"3",
                   //                      "start":false,
                   //                      "dst-port":"2",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:05",
                   //                      "startId":"00:00:00:00:00:00:00:02",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:02",
                   //                      "to":"00:00:00:00:00:00:00:05"
                   //                  },
                   //                  {
                   //                      "src-port":"3",
                   //                      "start":false,
                   //                      "dst-port":"2",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:08",
                   //                      "startId":"00:00:00:00:00:00:00:03",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:03",
                   //                      "to":"00:00:00:00:00:00:00:08"
                   //                  },
                   //                  {
                   //                      "src-port":"2",
                   //                      "start":false,
                   //                      "dst-port":"2",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:02",
                   //                      "startId":"00:00:00:00:00:00:00:01",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:01",
                   //                      "to":"00:00:00:00:00:00:00:02"
                   //                  },
                   //                  {
                   //                      "src-port":"3",
                   //                      "start":false,
                   //                      "dst-port":"2",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:07",
                   //                      "startId":"00:00:00:00:00:00:00:06",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:06",
                   //                      "to":"00:00:00:00:00:00:00:07"
                   //                  },
                   //                  {
                   //                      "src-port":"3",
                   //                      "start":false,
                   //                      "dst-port":"2",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:09",
                   //                      "startId":"00:00:00:00:00:00:00:08",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:08",
                   //                      "to":"00:00:00:00:00:00:00:09"
                   //                  },
                   //                  {
                   //                      "src-port":"3",
                   //                      "start":false,
                   //                      "dst-port":"2",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:08",
                   //                      "startId":"00:00:00:00:00:00:00:07",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:07",
                   //                      "to":"00:00:00:00:00:00:00:08"
                   //                  },
                   //                  {
                   //                      "src-port":"2",
                   //                      "start":false,
                   //                      "dst-port":"3",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:04",
                   //                      "startId":"00:00:00:00:00:00:00:05",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:05",
                   //                      "to":"00:00:00:00:00:00:00:04"
                   //                  },
                   //                  {
                   //                      "src-port":"2",
                   //                      "start":false,
                   //                      "dst-port":"3",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:05",
                   //                      "startId":"00:00:00:00:00:00:00:06",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:06",
                   //                      "to":"00:00:00:00:00:00:00:05"
                   //                  },
                   //                  {
                   //                      "src-port":"3",
                   //                      "start":false,
                   //                      "dst-port":"2",
                   //                      "isStart":false,
                   //                      "isEnd":false,
                   //                      "linkId":0,
                   //                      "endId":"00:00:00:00:00:00:00:0a",
                   //                      "startId":"00:00:00:00:00:00:00:01",
                   //                      "end":false,
                   //                      "from":"00:00:00:00:00:00:00:01",
                   //                      "to":"00:00:00:00:00:00:00:0a"
                   //                  }
                   //              ]


                    nodeArr.forEach(item=>{
                        item.key=item.id
                    })



                    // { from: "Add1", fromPort: "Out", to: "Subtract1", toPort: "A" },

                    // linkArr.forEach(item=>{
                    //     item.from=item.startId
                    //     item.fromPort=item['src-port']
                    //     item.to=item.endId
                    //     item.toPort=item['dst-port']
                    // })




                   // let linkArr=data.linkArr
                    init(this, nodeArr, linkArr)
                })

                // this.$http({
                //     url: this.$http.adornUrl(`/order/queryOrder/d47154c2-40ff-45a0-af5c-a5c54a29bb60`),
                //     method: 'get'
                // }).then(({data}) => {
                //     this.source = null
                //     if (this.myDiagram) this.myDiagram.div = null
                //     this.domains = []
                //     this.virtualDevice = []
                //     this.virtualDevice.push(...this.vmArr)
                //     // console.log(this.virtualDevice,'一个大西瓜')
                //     let objArr = []
                //     let source = data.order
                //     let stamp = (new Date()).getTime()
                //     source.domains.map((n, i) => {
                //         let str = `D${stamp + 5 * i}`
                //         objArr.push({
                //             old: n.domainId,
                //             new: str
                //         })
                //         n.domainId = str,
                //             n.domainName = str,
                //             n.key = str
                //     })
                //     source.chains.map(w => {
                //         w.links.map(m => {
                //             objArr.forEach(k => {
                //                 if (m.startId == k.old) m.startId = k.new
                //                 if (m.endId == k.old) m.endId = k.new
                //             })
                //         })
                //     })
                //     this.source = source
                //
                //     this.parseData(this.source)
                // })
            },

            // parseData(source) {
            //     let chains = source.chains
            //     let domains = source.domains
            //     let nodeArr = []
            //     let linkArr = []
            //     // chains.forEach(m => {
            //     //     m.vnfs.map(n => {
            //     //         let o = {
            //     //             key: n.vnfId,
            //     //             type: Number(n.vnfType) ? 'vpn' : 'firewall'
            //     //         }
            //     //         Object.assign(n, o)
            //     //     })
            //     //     m.links.map(n => {
            //     //         let o = {
            //     //             from: n.startId,
            //     //             to: n.endId
            //     //         }
            //     //         Object.assign(n, o)
            //     //     })
            //     //     nodeArr.push(...m.vnfs)
            //     //     linkArr.push(...m.links)
            //     // })
            //     // domains.map(n => {
            //     //     n.vms.map(m => {
            //     //         let o = {
            //     //             key: m.cmpId,
            //     //             type: "service",
            //     //             group: n.domainId
            //     //         }
            //     //         Object.assign(m, o)
            //     //         nodeArr.push(m)
            //     //     })
            //     //     let d = {
            //     //         key: n.domainId,
            //     //         isGroup: true
            //     //     }
            //     //     Object.assign(n, d)
            //     //     nodeArr.push(n)
            //     //     // 节点新增虚拟机
            //     //     // 节点先后顺序处理？from to自动解析
            //     // })
            //
            //     // console.log(nodeArr)
            //     // console.log(linkArr)
            //
            //     this.domains = domains
            //
            //     nodeArr = [
            //         {
            //             "dst-switch": "00:00:00:00:00:00:00:03",
            //             "key": '00:00:00:00:00:00:00:03',
            //             "is-bidirectional": true,
            //             "dst-port": "2",
            //             "src-port": "3",
            //             "type": "switch"
            //         },
            //         {
            //             "dst-switch": "00:00:00:00:00:00:00:02",
            //             "key": '00:00:00:00:00:00:00:02',
            //             "is-bidirectional": true,
            //             "dst-port": "2",
            //             "src-port": "3",
            //             "type": "switch"
            //         },
            //         {
            //             "dst-switch": "00:00:00:00:00:00:00:04",
            //             "key": '00:00:00:00:00:00:00:04',
            //             "is-bidirectional": true,
            //             "dst-port": "2",
            //             "src-port": "3",
            //             "type": "switch"
            //
            //         }, {
            //             "dst-switch": "00:00:00:00:00:00:00:03",
            //             "key": '00:00:00:00:00:00:00:03',
            //             "is-bidirectional": true,
            //             "dst-port": "2",
            //             "src-port": "3",
            //             "type": "switch"
            //
            //         },
            //         {
            //             "dst-switch": "00:00:00:00:00:00:00:02",
            //             "key": '00:00:00:00:00:00:00:02',
            //             "is-bidirectional": true,
            //             "dst-port": "2",
            //             "src-port": "2",
            //             "type": "switch"
            //
            //         }, {
            //             "dst-switch": "00:00:00:00:00:00:00:01",
            //             "key": '00:00:00:00:00:00:00:01',
            //             "is-bidirectional": true,
            //             "dst-port": "2",
            //             "src-port": "2",
            //             "type": "switch"
            //
            //         },
            //         {
            //             "dst-switch": "00:00:00:00:00:00:00:07",
            //             "key": '00:00:00:00:00:00:00:07',
            //             "is-bidirectional": true,
            //             "dst-port": "2",
            //             "src-port": "3",
            //             "type": "switch"
            //
            //         }, {
            //             "dst-switch": "00:00:00:00:00:00:00:06",
            //             "key": '00:00:00:00:00:00:00:06',
            //             "is-bidirectional": true,
            //             "dst-port": "2",
            //             "src-port": "3",
            //             "type": "switch"
            //
            //         }
            //     ]
            //     linkArr = [
            //         {
            //             end: false,
            //             endId: "00:00:00:00:00:00:00:03",
            //             from: "00:00:00:00:00:00:00:02",
            //             isEnd: false,
            //             isStart: false,
            //             linkId: 0,
            //             start: false,
            //             startId: "00:00:00:00:00:00:00:02",
            //             state: null,
            //             stateMessage: null,
            //             to: "00:00:00:00:00:00:00:02",
            //         },
            //
            //         {
            //             end: false,
            //             endId: "00:00:00:00:00:00:00:04",
            //             from: "00:00:00:00:00:00:00:03",
            //             isEnd: false,
            //             isStart: false,
            //             linkId: 0,
            //             start: false,
            //             startId: "00:00:00:00:00:00:00:03",
            //             state: null,
            //             stateMessage: null,
            //             to: "00:00:00:00:00:00:00:04",
            //         },
            //
            //         {
            //             end: false,
            //             endId: "00:00:00:00:00:00:00:01",
            //             from: "00:00:00:00:00:00:00:01",
            //             isEnd: false,
            //             isStart: false,
            //             linkId: 0,
            //             start: false,
            //             startId: "00:00:00:00:00:00:00:01",
            //             state: null,
            //             stateMessage: null,
            //             to: "00:00:00:00:00:00:00:02",
            //         },
            //         {
            //             end: false,
            //             endId: "00:00:00:00:00:00:00:07",
            //             from: "00:00:00:00:00:00:00:06",
            //             isEnd: false,
            //             isStart: false,
            //             linkId: 0,
            //             start: false,
            //             startId: "00:00:00:00:00:00:00:06",
            //             state: null,
            //             stateMessage: null,
            //             to: "00:00:00:00:00:00:00:07",
            //         }
            //     ]
            //     // nodeArr=[
            //     //     {
            //     //
            //     //         inPortId: 1,
            //     //         key: "W1574734652458",
            //     //         outPortId: 2,
            //     //         type: "firewall",
            //     //         vnfId: "W1574734652458",
            //     //     },
            //     //     {
            //     //         inPortId: 1,
            //     //         key: "V1574734657865",
            //     //         outPortId: 2,
            //     //         type: "vpn",
            //     //         vnfId: "V1574734657865",
            //     //     },
            //     //     {
            //     //         inPortId: 1,
            //     //         key: "V1574734664175",
            //     //         outPortId: 2,
            //     //         type: "vpn",
            //     //         vnfId: "V1574734664175",
            //     //     },
            //     //     {
            //     //         inPortId: 1,
            //     //         key: "W1574734657865",
            //     //         outPortId: 2,
            //     //         type: "firewall",
            //     //         vnfId: "W1574734657865",
            //     //     },
            //     // ],
            //     // linkArr=[
            //     //     {
            //     //         end: false,
            //     //         endId: "V1574734657865",
            //     //         from: "W1574734652458",
            //     //         isEnd: false,
            //     //         isStart: false,
            //     //         linkId: 0,
            //     //         start: false,
            //     //         startId: "W1574734652458",
            //     //         state: null,
            //     //         stateMessage: null,
            //     //         to: "V1574734657865",
            //     //     },
            //     //
            //     //     {
            //     //         end: false,
            //     //         endId: "V1574734664175",
            //     //         from: "V1574734657865",
            //     //         isEnd: false,
            //     //         isStart: false,
            //     //         linkId: 0,
            //     //         start: false,
            //     //         startId: "V1574734657865",
            //     //         state: null,
            //     //         stateMessage: null,
            //     //         to: "V1574734664175",
            //     //     },
            //     //
            //     //     {
            //     //         end: false,
            //     //         endId: "V1574734664175",
            //     //         from: "W1574734657865",
            //     //         isEnd: false,
            //     //         isStart: false,
            //     //         linkId: 0,
            //     //         start: false,
            //     //         startId: "W1574734657865",
            //     //         state: null,
            //     //         stateMessage: null,
            //     //         to: "V1574734664175",
            //     //     },
            //     //     {
            //     //         end: false,
            //     //         endId: "W1574734657865",
            //     //         from: "D1575882896828",
            //     //         isEnd: false,
            //     //         isStart: false,
            //     //         linkId: 0,
            //     //         start: false,
            //     //         startId: "D1575882896828",
            //     //         state: null,
            //     //         stateMessage: null,
            //     //         to: "W1574734657865",
            //     //     }
            //     // ]
            //
            //     // console.log(nodeArr)
            //     // console.log(linkArr)
            //     init(this, nodeArr, linkArr)
            // },
            switchImg(node) {
                return require(`@/assets/img/element/${node.type}.jpg`)
            },
        }
    }
</script>
